概要

XPages Extension Library「Dojo Accordion Container」及び「Dojo Accordion Pane」の利用方法について記述する。

 

「Dojo Accordion Container」とは

「Dojo Accordion Container」を使うと、アコーディオンメニューと呼ばれる、コンテンツ内を開閉するメニューを実装することが出来る。

ただし、このコントロール単体では動作せず、各コンテンツを表す「Dojo Accordion Pane」と組み合わせて利用する。

 

実現方法

1.「Dojo Accordion Container」の配置

コントロールビューの[Dojo Layout]にある「Dojo Accordion Container」をドラッグ＆ドロップする。

後述するAccordion Containerのプロパティ一覧に従って、プロパティを設定する。

2.「Dojo Accordion Pane」の配置

コントロールビューの[Dojo Layout]にある「Dojo Accordion Pane」を、先ほど配置した「Dojo Accordion Container」の緑色の●の所にドラッグ＆ドロップする。

1つでは意味がないので、2つ以上「Dojo Accordion Pane」をドラッグ＆ドロップする。

この時、各「Dojo Accordion Pane」はすべて「Dojo Accordion Container」の下に配置されるようにすること。

※下図は、Accordion Paneを3つ配置したときのアウトラインビューである。

後述するDojo Accordion Paneのプロパティ一覧に従って、プロパティを設定する。

「Dojo Accordion Pane」コントロールの緑色の●には、別のコントロールを埋め込むことが出来る（ラベルコントロールやビューコントロールも埋め込むことが可能）ので、

Accordion Paneのコンテンツを設定する。

XPageを保存する。

ブラウザで動作確認をする。

 

Dojo Accordion Contaierのプロパティ一覧

カテゴリ	プロパティ	説明
dojo	dojoAttributes
	dojoType
	dragRestriction
	tooltip
アクセシビリティ	title	Accordion Containerにマウスカーソルを合わせたときにポップアップで表示される名前
	waiRole
	waiState
イベント	onBlur
	onClick	Accordion Container（のどこでも）をクリックしたときのイベント
	onClose
	onDblClick
	onFocus
	onHide
	onKeyDown
	onKeyPress
	onKeyUp
	onMonseDown
	onMouseEnter
	onMouseLeave
	onMouseMove
	onMouseOut
	onMouseOver
	onMouseUp
	onShow
スタイル	disableTheme
	style	Accordion Containerのスタイル
	styleClass	Accordion Containerのスタイルを設定したCSSクラス
	themeId
基本	binding
	dir
	duration	Accordion Paneをクリックしたときにスライドして開くまでの時間（ミリ秒単位で設定可能）
	id	コントロール識別用のID
	lang
	loaded
	rendered
	rendererType
	selectedTab	アコーディオンコンテナが表示されたときに最初に表示されるアコーディオンペインのID

 

Dojo Accordion Paneのプロパティ一覧

カテゴリ	プロパティ	説明
dojo	dojoAttributes
	dojoType
	dragRestriction
	parseOnLoad
	tooltip	Accordion Paneのメニュー部分にマウスカーソルを合わせたときにポップアップで表示される名前
アクセシビリティ	title	Accordion Paneのメニュー部分に表示されるタイトル
	waiRole
	waiState
イベント	onBlur
	onClick	Accordion Paneの中（メニュー部分以外）をクリックしたときのイベント
	onClose
	onContentError
	onDblClick
	onDownloadEnd
	onDownloadError
	onDownloadStart
	onFocus
	onHide
	onKeyDown
	onKeyPress
	onKeyUp
	onLoad
	onMouseDown
	onMouseEnter
	onMouseLeave
	onMouseMove
	onMouseOut
	onMouseOver
	onMouseUp
	onShow
	onUnload
スタイル	disableTheme
	style
	styleClass
	themeId
基本	binding
	dir
	errorMessage
	extractContent
	href
	id	コントロール識別用のID
	lang
	loaded
	loadingMessage
	partialRefresh
	preload
	preventCache
	refreshOnShow
	rendered
	rendererType

 

調査環境

Lotus Domino Designer 8.5.3 Upgrade Pack1
Internet Explorer 8
Mozilla Firefox 15.0.1